<template>
  <div class="home-container f_c_m_c">
    <div class="header">
      <img :src="header_img" alt="" />
    </div>
    <div class="c_h1">
      <img :src="h1_bac_img" alt="" />
      <div class="f_c_m_c">
        <div class="f_r_m_c">
          <img :src="h1_left_img" class="h1_header_img" alt="" />
          <span style="color:#9A3405" class="font-32 bold_500"
            >如何免费拿云手机</span
          >
          <img :src="h1_right_img" class="h1_header_img" alt="" />
        </div>
        <div class="h1_content f_r_sb_c">
          <div class="left">
            <img :src="h1_copy_img" alt="">
            <img :src="h1_1_img" alt="">
          </div>
          <span class="ml-10 mr-10">复制口令</span>
          <img :src="h1_jt_img" class="h1_jt mr-10" alt="">
           <div class="left">
            <img :src="h1_d_img" alt="">
            <img :src="h1_2_img" alt="">
          </div>
           <span class="ml-10 mr-10">下载APP</span>
        </div>
      </div>
    </div>
    <div class="c_h2">
      <img :src="h2_bac_img" alt="" />
      <div class="f_c_m_c">
        <div class="h2_content f_c_m_c">
          <span>口令：{{str}}</span>
          <div class="btn btn1 color_fff" v-if="eff_status">
            <img :src="btn1_img" alt="">
            <div @click="copyToClipboard">复制</div>
          </div>
          <div class="btn btn2 color_fff" v-else>
            <img :src="btn2_img" alt="">
            <div>口令已过期</div>
          </div>
        </div>
      </div>
    </div>

     <div class="c_h3">
      <img :src="h3_bac_img" alt="" />
      <div class="f_c_m_c">
        <div class="h2_content f_c_m_c">
          <div class="btn btn1 color_fff">
            <img :src="btn3_img" alt="">
            <div>立即下载</div>
          </div>
          <div class="btn btn2 color_fff">
            <img :src="btn3_img" alt="">
            <div>我也要免费拿</div>
          </div>
          <img :src="h2_phone_img" class="h2_phone" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import btn1_img from "@/assets/share/btn1.png";
import btn2_img from "@/assets/share/btn2.png";
import btn3_img from "@/assets/share/btn3.png";
import h1_1_img from "@/assets/share/h1_1.png";
import h1_left_img from "@/assets/share/h1_left.png";
import h1_right_img from "@/assets/share/h1_right.png";
import h1_2_img from "@/assets/share/h1_2.png";
import h1_bac_img from "@/assets/share/h1_bac.png";
import h1_copy_img from "@/assets/share/h1_copy.png";
import h1_d_img from "@/assets/share/h1_d.png";
import h1_jt_img from "@/assets/share/h1_jt.png";
import h2_bac_img from "@/assets/share/h2_bac.png";
import h2_phone_img from "@/assets/share/h2_phone.png";
import h3_bac_img from "@/assets/share/h3_bac.png";
import header_img from "@/assets/share/header.png";


import { behest } from "@/api/goods";



export default {
  name: "share",
  components: {},
  data() {
    return {
      btn1_img,
      btn2_img,
      btn3_img,
      h1_1_img,
      h1_left_img,
      h1_right_img,
      h1_2_img,
      h1_bac_img,
      h1_copy_img,
      h1_d_img,
      h1_jt_img,
      h2_bac_img,
      h2_phone_img,
      h3_bac_img,
      header_img,
      str:'',
      eff_status:1,
    };
  },
  computed:{
    code(){
      return this.$store.getters.code;
    },
     token(){
      return this.$store.getters.token;
    }
  },
  created(){
    this.behest()
  },
  methods:{
    copyToClipboard() {
      this.$copyText(this.str).then(() => {
       this.$toast('复制成功')
        // 复制成功的操作
      }, () => {
        this.$toast('复制失败')
        // 复制失败的操作
      });
    },
    //获取复制令牌
    behest(){
      behest({loading:true,code:this.code}).then(res=>{
        this.str = res.data.str
        this.eff_status = res.data.eff_status
      })
    },
  }
};
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  background: #fff3e6;
  width: 720px;
  .header {
    width: 100%;
    height: 616px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .c_h1 {
    width: 662px;
    height: 281px;
    position: relative;
    > img {
      width: 100%;
      height: 100%;
    }
    > div {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      > div {
        margin-top: 15px;
        > span {
          margin: 0 10px;
        }
        .h1_header_img {
          width: 33px;
          height: 12px;
        }
      }
      .h1_content {
        width: 612px;
        height: 156px;
        background: #ffffff;
        border-radius: 24px;
        box-sizing: border-box;
        padding: 30px;
        margin-top: 50px;
        color: #A5552C;
        font-size: 26px;
        font-weight: 500;
        .left{
          width: 96px;
          height: 96px;
          position: relative;
          >img:nth-child(1){
            width: 100%;
            height: 100%;
          }
          >img:nth-child(2){
            width: 44px;
            height: 44px;
            position: absolute;
            left: -5px;
            top: -5px;
          }
        }
        .h1_jt{
          width: 49px;
          height: 38px;
        }
      }
    }
  }
  .c_h2{
     width: 671px;
    height: 398px;
    position: relative;
    > img {
      width: 100%;
      height: 100%;
    }
    > div {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      color: #A5552C;
      font-size: 32px;
      .h2_content{
        margin-top: 160px;
        >span{
          margin-bottom: 20px;
        }
        .btn{
          width: 467px;
          height: 105px;
          position: relative;
          
          img{
            width: 100%;
            height: 100%;
          }
          div{
             width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left:0;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
    .c_h3{
     width: 671px;
    height: 644px;
    position: relative;
    margin-top: 50px;
    > img {
      width: 100%;
      height: 100%;
    }
    > div {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      color: #A5552C;
      font-size: 32px;
    }
     .h2_content{
        margin-top: 470px;
        position: relative;
        .h2_phone{
          position: absolute;
          right: -0px;
          bottom: 130px;
          width: 158px;
          height: 141px;
        }
        .btn{
          width: 467px;
          height: 105px;
          position: relative;
          
          img{
            width: 100%;
            height: 100%;
          }
          div{
             width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left:0;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
}
</style>
